<template>
  <div class="container" style="padding: 30px 30px 100px; position: relative">
    <div
      class="box"
      style="padding-top: 40px; display: flex; justify-content: center"
    >
      <p class="searchRes" v-show="showRes">
        搜索结果为：&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        &emsp;&emsp;&emsp;&emsp;&emsp;
        <el-button @click="back" type="text" style="font-size:16px"><<返回</el-button>
      </p>
      <p class="searchRes" v-show="showNO">no data</p>
      <el-card
        v-for="item in propertieList"
        :key="item.id"
        style="width: 800px; height: 300px"
      >
        <el-row v-model="propertieList" type="flex" justify="start">
          <div class="item" @click="toDetail(item.id)">
            <div class="left">
              <img
                :src="item.image"
                alt="图片加载失败"
                style="width: 250px; height: 250px; border-radius: 50%"
              />
            </div>
          </div>
          <div
            class="right"
            style="
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: center;
            "
          >
            <h3 style="margin-bottom: 100px">
              练习时常两年半，唱跳Rap我最行！！！
            </h3>
            <h3 style="margin-bottom: 30px">名字：{{ item.title }}</h3>
            <span style="height: 62px; margin-bottom: 10px; overflow: hidden"
              >简介：{{ item.desc }}</span
            >
          </div>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getPropertieList } from "@/api/propertie";
import { getCategoryById } from "@/api/categorys";
export default {
  data() {
    return {
      propertieList: [],
      showNO: false, //显示没有数据
      showRes: false, //显示搜索结果
    };
  },
  methods: {
    async getCategoryById() {
      let agent = this.$route.params.agent;
      console.log(18, agent);
      let res = await getPropertieList(agent);
      console.log(3666, res);
      this.propertieList = res.data;
      console.log(22222222, this.propertieList);
    },
    async toDetail(id) {
      console.log(44, id);
      await this.$router.push({ name: "detail", params: { id: id } });
    },
    back() {
      this.$router.push("/dashboard");
    },
  },
  created() {
    if (this.$route.query.searchItem) {
      console.log(11111111111111111111, this.$route.query.searchItem);
      let searchRes = this.$route.query.searchItem;
      this.propertieList = searchRes.data;
      this.showRes = true;
      if (searchRes.data.length == 0) {
        this.showNO = true;
      }
    } else {
      this.getCategoryById();
    }
  },
};
</script>

<style lang="scss">
.aa {
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.searchRes {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}
</style>